<template>
  <section>
    <el-checkbox-group v-model="models" v-loading="loading">
      <el-checkbox style="width: 25%;margin: 5px 0;" v-for="module in moduleList" :label="module.id" :key="module.id"  @change="addModel($event,module)" value-key="id">
        {{module.id}}{{module.title}}
      </el-checkbox>
    </el-checkbox-group>
    <el-row v-if="moduleList && moduleList.length === 0 ">
      没有可添加的模板。
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "selReportModel",
    props: ['selModules','currReport'],
    data() {
      return {
        loading:false,
        moduleList:null,
        models:null
      }
    },
    created(){
      //加载模块列表
      console.log('新建')
      this.loading=true
      this.models=this.selModules
      this.getReportModuleList()
    },
    mounted(){
    },
    computed:{
    },
    watch: {
      selModules(nv,ov){
        console.log(nv)
        this.loading=true
        this.models=this.selModules
        this.getReportModuleList()
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getReportModuleList(){
        this.fetch({name:"getReportModuleList"})
          .then(res=>{
            this.moduleList=res
            this.selModules.forEach(m=>{
              let index = res.findIndex(r=>r.id === m)
              this.moduleList.splice(index,1)
              // console.log(tmp)
            })
            this.loading=false
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addModel(e,m){
        console.log(m)
        console.log(this.currReport)
        if(e){
          let data={title:this.currReport.userName+'-'+m.title,reportModuleId:m.id,reportId:this.currReport.id}
          console.log('增加')
          this.createReportItem(data)
        }else {
          console.log('删除')
          this.$alert('请到报告编辑页面删除', '取消模块', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      },
      createReportItem(data){
        this.fetch({name:"createReportItem",data})
          .then(res=>{
            console.log(res)
            console.log(this.currReport)
            this.currReport.reportItems.push(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
